昨天有跟各位介紹 Props 的基本操作，那我們今天要講的是資料類型的驗證

props 資料類型的驗證

元件與網站可以針對從外部傳入的 props 進行型別檢查與驗證。
那 Vue 內建可以檢查的 type 屬性有以下幾種類型：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

那我們該如何指定資料格式呢，讓我改寫一下：

props: {
  'props-number': {
    type: Number
  } 
}

我們也可以只定傳入的 props-number 為一個 Number 的格式：

<my-component :props-number="123"></my-component>

要使用 v-bind 的寫法喔，不然傳入的將會是 123 的字串

若是我們嘗試傳遞一個 "123" 的字串給 props-number，則可以在 console 主控台看到這樣的錯誤：

[Vue warn]: Invalid prop: type check failed for prop "propsNumber". Expected Number with value 123, got String with value "123".

而這段警告的意思是，propsNumber 的 prop 狀態，Vue 預期的狀況應該是 Number 型別的資料，但傳入的卻是字串。

但若我們想要的是允許多種不同格式的 prop 的話，就可以透過陣列指定：

props: {
  something: {
    type: [String, Number]
  } 
}

也可加上 required 的屬性，去指定此 props 為必要的屬性，並設定為 true：

props: {
  something: {
    required: true
  }
}

但如果沒有傳入指定的 props 則會在 console 主控台看到錯誤：

Missing required prop: "something"

替 props 指定預設值

如果我們想替 props 指定預設值也是可以的，只要加上 default 就可以了：

props: {
  something: {
    type: [String, Number],
    default: 'Hello'
  }
}

就像這樣，就算沒有傳入 something ，在子元件的實體中，也會自動給予 Hello' 做為預設值

如果我們想拿陣列、物件當作預設內容也可以：

something: {
  type: Array,
  default: [1, 2, 3]
} 

something: {
  type: Object,
  default: {
    msg: 'Hello Vue 3.0!'
  }
}

可以透過 default 去指定預設內容，並且避免因為 props 忘記傳遞所帶來的問題。

那我們今天對於 props 資料類型的驗證就到這裡結束拉
謝謝大家的觀看，我們明天見